const webpack = require('webpack');
const path = require('path');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");

module.exports = {
  entry: './src/index.js', //入口文件的配置项 单一入口或者多入口
  output: {
    path: path.join(__dirname, 'dist'), // 出口目录，dist文件
    filename: '[name].js', //这里name就是打包出来的文件名，因为是单入口，就是main，多入口下回分解
    publicPath: './'  //同时要处理打包图片路径问题
},
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
                { loader: 'css-loader', options: { importLoaders: 1 } },
                'postcss-loader'
            ]
        })
      },
      {
        test: /\.(png|jpg|gif|jpeg|svg)/,
        use: [{
          loader: 'url-loader',
          options: {
            outputPath: 'images/', //图片输出路径
            limit: 5*1024
          }
        }]
      },
      {
        test: /\.sass$/,
        use: extractTextPlugin.extract({
            use: [{
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }],
            fallback: "style-loader"
        })
      },
      {
        test: /\.(htm|html)$/i,
        use:[ 'html-withimg-loader'] 
      },
      {
        test:/\.(jsx|js)$/,
        use:{
            loader:'babel-loader',
        },
        exclude: /node_modules/
      },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
    ]
  }, //模块：例如解读CSS,图片如何转换，压缩
  plugins: [
    new htmlPlugin({
      minify:{
          removeAttributeQuotes:false
      },
      hash:true,
      template:'./src/index.html',
      filename: 'index.html',
      title: '首页'
    }),
    new extractTextPlugin({
      filename: 'css/[name].[hash].css'
    }),
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'src/*.html')),
    }),
    new webpack.ProvidePlugin({
      $:"jquery"
    }),
    new webpack.HotModuleReplacementPlugin()
  ], //插件，用于生产模版和各项功能
  devServer: {
    contentBase: path.join(__dirname, "dist"), //静态文件根目录
    port: 9090, // 端口
    host: 'localhost',
    overlay: true,
    compress: true // 服务器返回浏览器的时候是否启动gzip压缩
  } //配置webpack开发服务功能
}